<template>
  <c-loading :loading="false">
    <view class="container">
      <!-- <c-sort class="sort-wrap" @change="reload" v-model="state.sortField" v-model:desc="state.isDesc">
        <c-sort-item label="默认" value="" desc />
        <c-sort-item label="销量" value="sales" desc />
        <c-sort-item label="价格" value="salePrice" caret />
        <c-sort-item label="筛选" disabled icon="filter" @tap="showFilter = true" />
      </c-sort> -->
      <view class="goods-wrap">
        <goods-item v-for="item in list" :key="item.id" v-bind="item" @cart="onCart"></goods-item>
      </view>
      <c-pager v-bind="pager"></c-pager>
    </view>
    <template #popup>
      <sku-popup v-model="showSku" v-bind="info ?? {}" btn-text="加入购物车" @confirm="onAddCart"></sku-popup>
      <!-- <c-popup position="right" v-model="showFilter">
        <view>筛选详情</view>
      </c-popup> -->
    </template>
  </c-loading>
</template>
<script setup>
import { CLoading, CPager, CPopup, CSearch, CSort, CSortItem } from '@/components';
import { usePager } from '@/hooks';
import { reactive, ref } from 'vue';
import { View } from '@tarojs/components';
import goodsItem from '@/pages/goods/components/goods-item.vue';
import api from '@/api';
import skuPopup from '@/pages/goods/components/sku-popup.vue';
import toast from '@/utils/toast';

const state = reactive({
  sortField: '',
  isDesc: false
});

const showFilter = ref(false);
const showSku = ref(false);
const info = ref(null);
 

const onCart = item => {
  toast.loading.lock(async () => {
    info.value = await api.goods.goodsGetDetail({ id: item.id });
    showSku.value = true;
  });
};

const onAddCart = async ({ sku, qty }) => {
  await api.goods
    .cartAdd({
      id: sku.id,
      value: qty
    })
    .success('已加入您的购物车', true)
    .error();
};

const { pager, list, reload } = usePager({
  handler: (skip, take) =>
    api.goods.collectsList({
      ...state,
      skip,
      take
      //   KeywordField:'goodsName',
      //   keyword:'12312'
    })
});
</script>
<style lang="scss">
.goods-wrap {
  padding: 20px 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.sort-wrap {
  padding: 0 30px;
}
</style>
